<template>
  <div class="app">
    <router-view></router-view>
    <van-nav-bar
        title="搜索商品"
        left-text="返回"
        left-arrow
        @click-left="$router.go(-1)"
      />
    <input type="text" name="" id="" placeholder="搜索商家，商品名称" v-model="value">
    <span @click="serch()">搜索</span>
    <div class="seach" v-show="good"> 
        <div class="bot">
            <h3>历史搜索</h3>
            <button @click="clean()">清除</button>
        </div>
        <span v-for="(item,index) in arr" class="hh" :key="index">{{item}}</span>
        <div class="bot">
            <h3>搜索发现</h3>
        </div>
        <span v-for="(item,index) in seach" class="hh" :key="index">{{item}}</span>
    </div>
    <div class="good1" v-for="(item,index) in seachlist" :key="index">
                <div class="left">
                    <img :src="item.picUrl" alt="">
                </div>
                <div class="right">
                    <h3>{{item.name}}</h3>
                    <p>
                        <span class="xing">★{{item.wmPoiScore/10}}</span>
                        <span>{{item.monthSalesTip}}</span>
                    </p>
                    <p>
                        <span>{{item.minPriceTip}}</span>
                        <span>{{item.deliveryTimeTip}}</span>
                    </p>
                </div>
    </div>
  </div>
</template>

<script>
import {shop_search} from '../utils/service'
import {Toast} from 'vant'
export default {
    data() {
        return {
            arr: [],
        value: "",
        seach: ["自助火锅", "外卖", "鲜花", "川湘小炒", "黄焖鸡米饭", "一点点", "蜜雪冰城", "星巴克"],
        seachlist:[],
        good:true
        }
        
    },
    methods: {
        serch() {
            if(this.value){
                this.arr.push(this.value)
                shop_search({searchkey:this.value}).then((res)=>{
                    if(res.data.code==200){
                        this.seachlist=res.data.list
                    }
                })
                this.value = ""
                this.good=false
            }else{
                Toast.fail('请输入搜索内容')
            }
        },
        clean() {
            this.arr = []
        }
    }
}
</script>

<style scoped>
 .app {
        width: 100%;
        height: auto;
        padding: 10px 14px;
        box-sizing: border-box;
        }

        .app span {
            color: rgb(44, 106, 230);
            font-size: 16px;
            font-weight: bold;
            background: #fff;
            cursor: pointer;
            display: inline-block;
            padding: 4px 6px;

        }

        .app input {
            outline: none;
            border: none;
            width: 80%;
            background: #e4e1e1;
            border-radius: 12px;
            padding: 0 8px;
            height: 28px;
            font-size: 13px;
            text-indent: 14px;
        }

       .app .hh {
            display: inline-block;
            padding: 4px 8px;
            border-radius: 8px;
            background: rgb(210, 208, 208);
            margin: 3px 5px;
            opacity: 0.7;
            font-size: 14px;
            color: #333;
            font-weight: normal;
        }

        .bot {
            width: 100%;
            height: 34px;
            margin-top: 14px;
        }

        .bot h3 {
            margin: 0 0 0 4px;
        }

        .bot button {
            float: right;
            border: none;
            border-radius: 6px;
            padding: 3px 6px;
            margin: 0 20px 0 0;
            font-size: 12px;
        }
.good1 {
    width: 100%;
    height: auto;
    padding: 20px 10px;
    display: flex;
    justify-content: left;
    box-sizing: border-box;
}
.good1 .right {
    margin-left: 10px;
    float: right;
}
.good1 .left {
    float: left;
}

.good1 .right h3 {
    margin-bottom: 10px;
    width: 220px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.good1 .right>p {
    display: flex;
    justify-content: space-between;
}

.good1 .right span {
    color: #999;
    font-size: 12px;
}

.good1 .right .xing {
    color: orange;
}

.good1 img {
    width: 97px;
    height: 97px;
}

/* .big {
    width: auto;
    height: auto;
} */
</style>